import React, { useState, useEffect } from 'react'
import {
    View,
    Text,
    ImageBackground,
    StyleSheet,
    Image,
    TextInput,
    Alert
} from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler';
import '../../common/global'
import request from './fetch'

const Entry = ({ navigation }) => {
    const [value, onChangeVal] = React.useState('');
    const [text, onChangeText] = React.useState('');
    const [reText, onChangeReText] = useState('');
    const [color, setColor] = useState('rgb(9,196,153)');

    function changColor(color) {
        if (color == 'rgb(171,134,167)') {
            return
        } if (color == '#34B9C0') {
            navigation.navigate('song')
        }
    }

    function getRegister() {
        let time = new Date();
        let userid = time.getTime();
        userid = userid + '';
        userid = userid.slice(8);

        request({
            url: '/createUser',
            method: 'post',
            data: {
                name: value,
                password: text,
                userid: userid
            }
        }).then((res) => {
            console.log('********');
            console.log(res);
        })
    }

    function checkPassStrong(str) {
        if (str.length < 6) {
            Alert.alert('密码长度应该大于等于6位')
            return false;
        }
        if (str.length >10) {
            Alert.alert('密码长度应该小于等于10位')
            return false;
        }
        var containDigit = RegExp(/[\d]+/).test(str);
        var containLetters = RegExp(/[a-zA-Z]+/).test(str);

        if (containDigit && containLetters) {
            return true;
        } else {
            Alert.alert('密码中应该有数字和字母');
            return false;
        }
    }
    return (
        <ImageBackground source={require('../../Image/login.png')} style={styles.image}>
            <View style={styles.box}>
                <TextInput
                    style={styles.inp1}
                    placeholder="起个名字吧"
                    autoFocus
                    keyboardType="number-pad"
                    value={value}
                    onChangeText={
                        (tex) => { onChangeVal(tex), tex.length > 0 && text.length > 0 ? setColor('#34B9C0') : setColor('rgb(171,134,167)') }
                    }
                />
                <TextInput
                    style={styles.inp2}
                    placeholder="请输入密码"
                    textContentType="password"
                    keyboardType="default"
                    secureTextEntry={true}
                    onChangeText={(text) => { onChangeText(text) }}
                    value={text}
                />

                <TextInput
                    style={styles.inp2}
                    placeholder="请再次输入密码"
                    textContentType="password"
                    keyboardType="default"
                    secureTextEntry={true}
                    onChangeText={(reText) => { onChangeReText(reText), text == reText && value.length > 0 ? setColor('#34B9C0') : setColor('rgb(171,134,167)') }}
                    value={reText}
                />

                <TouchableOpacity style={[styles.btn, { backgroundColor: color }]} onPress={async () => {

                    if(!checkPassStrong(text)){
                        return;
                    }
                    if (text !== reText) {
                        Alert.alert('密码与确认密码不同');
                        return;
                    } else {
                        changColor(color);
                        await getRegister();
                        navigation.navigate('entry');
                    }

                }}>
                    <View style={styles.value}>
                        <Text style={styles.btnText}>注册</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </ImageBackground>
    )
}

export default Entry

const styles = StyleSheet.create({
    image: {
        width: w,
        height: h,
    },
    box: {
        backgroundColor: '#FFF',
        width: 400,
        height: 300,
        marginTop: 350,
        marginLeft: 25,
        borderRadius: 30,
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 28
    },
    inp1: {
        backgroundColor: 'rgb(245,245,245)',
        borderRadius: 30,
        paddingLeft: 20,
    },
    inp2: {
        backgroundColor: 'rgb(245,245,245)',
        marginTop: 20,
        borderRadius: 30,
        paddingLeft: 20,
    },
    btn: {
        height: 45,
        borderRadius: 30,
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 30,
        marginTop: 27,
    },
    btnText: {
        color: '#FFF',
        fontSize: 17,
    }
})





// import React, { Component } from 'react'
// import { View,
//     Text, 
//     ImageBackground,
//     StyleSheet,
//     TextInput,
//     Alert,
//     Image
//  } from 'react-native'
// import { TouchableOpacity } from 'react-native-gesture-handler'
// import '../../common/global'

// class Register extends Component {
//     constructor(props){
//         super(props);
//         this.state={
//             username:'',
//             pwd:'',
//             pwdConfirm:''
//         }
//     }
//     confirmName=(name)=>{
//         if(name.length>6){
//             Alert.alert('提示','用户名不能超过6个字符',[{text:'确定'}])
//         }
//     }

//     confirmPwd=(pwd)=>{
//         const regex='^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$'
//         const patt=new RegExp(regex,'g');
//         const result=patt.test(pwd)
//         if(pwd.length<6 || pwd.length >12){
//             Alert.alert('提示','密码必须在6-12个字符之间~',[{text:'确定'}])
//         }else if(!result){
//             Alert.alert('提示','密码必须包含字母和数字~',[{text:'确定'}])

//         }
//     }

//     register = () => {
//         if (this.state.username != '' && this.state.pwd != '') {
//             if (this.state.username != 'Admin') {
//                 if (this.state.pwd === this.state.pwdConfirm &&this.state.username.length<=6) {
//                     const { goBack } = this.props.navigation;  //获取navigation的goBack方法
//                     Alert.alert("注册成功","返回登录",[{text: '确定', onPress: () => { goBack(); }}])  //给弹出的提示框添加事件
//                 } else if(this.state.pwd !== this.state.pwdConfirm){
//                     Alert.alert("注册失败","密码与确认密码不同",[{text: '确定'}]);
//                 }else if(this.state.username.length>6){
//                     Alert.alert('再次提示','用户名不能超过6个字符',[{text:'确定'}])
//                 }
//             } else {
//                 Alert.alert("注册失败","此用户名已经被注册",[{text: '确定'}]);
//             }
//         } else {
//             Alert.alert("注册失败","用户名或密码不能为空",[{text: '确定'}]);
//         }
//     };

//     render(){
//         return (
//             <View style={styles.all}>
//                 <View style={styles.welcomes}>
//                     <Text style={styles.welcome}>欢迎使用Release</Text>           
//                 </View>
//                 <View style={styles.box}>
//                     <Text style={styles.title}>昵称</Text>
//                     <TextInput placeholder="输入昵称"
//                         style={styles.inp}
//                         onBlur={()=>this.confirmName(this.state.username)}
//                         onChangeText={(username)=>this.setState({username:username})}
//                     />
//                     <Text style={styles.star}>*</Text>

//                 </View>

//                 <View style={styles.cue}>
//                     <Text style={styles.cueText}>昵称不能大于6个字符~</Text>
//                 </View>


//                 <View style={styles.box}>
//                     <Text style={styles.title}>密码</Text>
//                     <TextInput placeholder="输入密码"
//                         style={styles.inp}
//                         onBlur={()=>this.confirmPwd(this.state.pwd)}
//                         textContentType="password"
//                         keyboardType="default"
//                         secureTextEntry={true}
//                         onChangeText={(pwd)=>this.setState({pwd:pwd})}
//                     />
//                     <Text style={styles.star}>*</Text>
//                 </View>

//                 <View style={styles.cue}>
//                     <Text style={styles.cueText}>密码为6-12个字符，包含字母和数字~</Text>
//                 </View>
//                 <View style={styles.box}>
//                     <Text style={styles.title}>确认密码</Text>
//                     <TextInput placeholder="再次输入密码"
//                         style={styles.inp}
//                         textContentType="password"
//                         keyboardType="default"
//                         secureTextEntry={true}
//                         onChangeText={(pwdCon)=>this.setState({pwdConfirm:pwdCon})}
//                     />
//                     <Text style={styles.star}>*</Text>

//                 </View>
//                 <TouchableOpacity style={styles.btn} onPress={()=>this.register()}>
//                     <View style={styles.value}>
//                         <Text style={styles.btnText}>注册</Text>
//                     </View>
//                 </TouchableOpacity>
//             </View>
//         )
//     }
// }

// export default Register
// const styles=StyleSheet.create({
//     cue:{
//         width:w-60,
//         height:20,
//         marginLeft:110,
//     },
//     cueText:{
//         color:'black'
//     },
//     all:{
//         width:w,
//         height:h,
//         padding:10,
//         paddingTop:20,
//         backgroundColor: 'rgba(230,232,255,1)'
//     },
//     welcome:{
//         fontSize:30,
//         color:'black',
//         marginBottom:10
//     },
//     box:{
//         width:w-60,
//         height:50,
//         marginLeft:20,
//         // borderWidth:2,
//         // borderColor:'red',
//         flexDirection:"row",
//         marginBottom:15,
//         position:'relative'
//     },
//     star:{
//         position:'absolute',
//         right:0,
//         bottom:0,
//         fontSize:30,
//         color:'red'
//     },
//     inp:{
//         width:w-160,
//         fontSize:18,
//         borderBottomWidth:1,
//         color:'black',
//         borderBottomColor:'rgb(146,147,162)',
//         position:'absolute',
//         right:10
//     },
//     title:{
//         fontSize:20,
//         width:80,
//         position:'absolute',
//         bottom:0
//     },
//     btn:{
//         width:w-160,
//         marginTop:20,
//         marginLeft:70,
//         height:50,
//         borderRadius:30,
//         backgroundColor:'#34B9C0',
//         position:'relative'

//     },
//     btnText:{
//         color:'white',
//         fontSize:20,
//         width:50,
//         height:30,
//         marginTop:5,
//         marginLeft:25,

//     },
//     value:{
//         width:100,
//         height:40,
//         position:'absolute',
//         left:'50%',
//         top:'50%',
//         marginTop:-20,
//         marginLeft:-50,

//     },
// })